<template>
	<view class="list-scroll-container">
		<scroll-view scroll-y="true" class="list-scroll" @scrolltolower="loadMore">
			<view>
				<ListCard 
					:key="index"
					v-for="(item, index) in articleList"
					:item="item"
				></ListCard>
			</view>
			<uni-load-more v-if="articleList.length === 0 || articleList.length > 7" :status="loadData.loading || 'loading'"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"ListItem",
		
		props: {
			articleList: Array,
			loadData: Object
		},
		
		data() {
			return {
				itemList: [
					{
						mode: "base"
					},
					{
						mode: "column"
					},
					{
						mode: "image"
					},
					{
						mode: "base"
					},
					{
						mode: "column"
					},
					{
						mode: "image"
					}
				]
			};
		},
		
		methods: {
			loadMore() {
				console.log("到底啦");
				this.$emit('loadMore');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-scroll-container {
		height: 100%;
		.list-scroll {
			height: 100%;
			overflow: hidden;
			box-sizing: border-box;
		}
	}
</style>